<template>
    <div class="zh_box">
        <div class="header">
            <p>指挥调度</p>
        </div>
        <!-- 搜索 -->
        <div class="content">
            <div class="search">
                <div class="searchBox">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-row>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple" />
                                <el-form-item label="姓名 ：">
                                    <el-input v-model="formInline.user" placeholder="请输入" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light" />
                                <el-form-item label="联系方式：">
                                    <el-input v-model="formInline.phone" placeholder="请输入" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple" />
                                <el-form-item label="现居地：">
                                    <el-select v-model="formInline.address" placeholder="请选择">
                                        <el-option label="相城区" value="相城区" />
                                        <el-option label="Zone two" value="beijing" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple" />
                                <el-form-item label="人员类型：">
                                    <el-select v-model="formInline.people" placeholder="请选择">
                                        <el-option label="确诊病例" value="确诊病例" />
                                        <el-option label="密接人员" value="密接人员" />
                                        <el-option label="次密接人员" value="次密接人员" />
                                        <el-option label="一般接触人员" value="一般接触人员" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light" />
                                <el-form-item label="任务类型：">
                                    <el-select v-model="formInline.taskType" placeholder="请选择">
                                        <el-option label="疾控核实" value="疾控核实" />
                                        <el-option label="120转运" value="120转运" />
                                        <el-option label="环境采样" value="环境采样" />
                                        <el-option label="其他" value="其他" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple" />
                                <el-form-item label="状态：">
                                    <el-select v-model="formInline.status" placeholder="请选择">
                                        <el-option label="待分配" value="待分配" />
                                        <el-option label="待接收" value="待接收" />
                                        <el-option label="进行中" value="进行中" />
                                        <el-option label="已完成" value="已完成" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item class="searchBtn">
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button @click="onReset">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 批量操作 创建调度 -->
            <div class="establish_box">
                <el-button type="primary" @click="cj">创建调度</el-button>
                <el-button @click="fp" v-if="!isShow">批量分配</el-button>
                <el-button @click="quitfp" v-if="isShow">取消批量分配</el-button>
                <el-button @click="gofp" v-if="isShow">去分配</el-button>
            </div>
            <!-- 表格 -->
            <div class="form-box">
                <el-table v-fit-columns :data="list" border style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" v-if="isShow"/>
                    <el-table-column label="序号" align="center" min-width="5%" v-if="!isShow">
                        <template #default="{ $index }">
                            {{ (currentPage - 1) * pageSize + $index + 1 }}
                        </template>            
                    </el-table-column>
                   
                    <el-table-column prop="name" label="姓名" align="center" min-width="8%"/>
                    <el-table-column prop="sex" label="性别" align="center" min-width="8%"/>
                    <el-table-column prop="number" label="联系电话" align="center" min-width="10%"/>
                    <el-table-column prop="address" label="现居地" align="center" min-width="12%"/>
                    <el-table-column prop="jointType" label="人员类型" align="center" min-width="8%"/>
                    <el-table-column prop="taskType" label="任务类型" align="center" min-width="10%"/>
                    <el-table-column prop="taskGroup" label="分配小组" align="center" min-width="10%"/>
                    <el-table-column prop="registrant" label="负责人" align="center" min-width="8%"/>
                    <el-table-column prop="taskStatus" label="状态" align="center" min-width="8%"/>
                    <el-table-column label="操作" width="191" align="center" min-width="15%">
                        <template #default = 'scope'>
                  <div style="display: flex; align-items: center;justify-content:center;">
                    <div v-for="(item, index) in scope.row.play " :key="index"><span
                        style="color:#049eff; margin-right:5px; font-size:13px;cursor:pointer;" @click="operate(item,scope.row)">{{
                          item }}</span></div>
                  </div>
                </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
    </div>
    <!--抽屉 -->
    <el-drawer v-model="drawer" title="I'm outer Drawer" size="50%">

    </el-drawer>


    <el-dialog
    v-model="dialogVisible"
    title="分配"
    width="30%"
    :before-close="handleClose"
  >
    
    <ul>
        <el-checkbox-group v-model="checkList" style="display:flex;flex-direction:column;">
    <el-checkbox label="密接排查组"/>
    <el-checkbox label="排查一组" />
    <el-checkbox label="排查二组" />
    <el-checkbox label="排查三组"  />
    <el-checkbox label="排查四组" />
  </el-checkbox-group>
    </ul>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary"  @click="SubmitEvent">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script lang="ts">
import { reactive ,onMounted, defineComponent, toRefs} from 'vue'
import { ref } from 'vue'
import axios from '@/util/http'
import {useRouter} from 'vue-router'
import { ElTable } from 'element-plus'


// import { ElMessageBox } from 'element-plus'
// 删除弹框
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
    name:'zhihui',
    setup(){
        interface User {
  date: string
  name: string
  address: string
}
        let rowId = ref('')
        let currentPage = ref(1)
        let pageSize = ref(10)
        const router = useRouter()
        let dialogVisible = ref(false)
        let drawer = ref(false)
        let checkList = ref([])
        let isShow = ref(false)
        let idList = ref([] as any)
        const multipleTableRef = ref<InstanceType<typeof ElTable>>()
        const multipleSelection = ref([] as any)
        let innerDrawer = ref(false)
// 删除弹框
const open = () => {
    ElMessageBox.confirm(
        '删除后不可恢复，是否继续操作?',
        '删除确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
// 操作表单字段名
const handleClick = () => {
    console.log('click')
}
// 定义表单字段名
const formInline = reactive({
    user: '',
    region: '',
    status:'',
    taskType:'',
    people:'',
    address:'',
    phone:''
})



// 创建调度函数
const cj = () => {
    drawer.value = true
    router.push('/AddCommand')

}

// 批量分配调度函数
const fp = () => {
    isShow.value = !isShow.value

}
const quitfp = () => {
    isShow.value = !isShow.value

}
const gofp = () => {
    isShow.value = !isShow.value
    dialogVisible.value = true


}

// edit 编辑
const edit = () => {
    drawer.value = true
}

// 抽屉、
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('You still have unsaved data, proceed?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
// table 字段名
const Msg = reactive({
    list:[]
})
// 表单搜索提交事件
const onSubmit = () => {
    let from = formInline
    axios({
        method:'get',
        url:'/command/findTasklistByCondition',
        params:{
            currentPage:'1',
            pageSize:'10',
            name:from.user,
            phoneNumber:from.phone,
            jointType:from.people,
            address:from.address,
            taskType:from.taskType,
            status:from.status
        }
    }).then((res)=>{
        Msg.list = res.data.data
    })

}

const operate=(item,row)=>{
     rowId = row.taskId
    if(item == '删除'){
        ElMessageBox.confirm(
          '删除后将不可恢复，是否继续此操作？',
          '删除确认',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(async() => {
            await axios({method:'post',url:'/command/delTaskById',params:{taskId:rowId}}).then((res)=>{
            })
            ElMessage({
              type: 'success',
              message: 'Delete completed',
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: 'Delete canceled',
            })
          })
    }
    else if(item == '查看详情'){
        router.push(`/DetailCommand?id=${rowId}`)
    }
    else if(item == '编辑'){ 
        let id = row.id 
        router.push({path:'/EditCommand',query:{id}})
    }
    else if(item == '分配'){
        dialogVisible.value = true
    }
}
onMounted( async()=>{
            await axios({
                method:'get',
                url:'command/findTaskList',
                params:{
                    currentPage:'1',
                    pageSize:'10'
                }
            }).then((res)=>{
                Msg.list = res.data.data
                res.data.data.forEach(element => {
        if(element.taskStatus == '未分配'){
          element.play =['编辑','删除','分配','查看详情'] 
        }
        else if(element.taskStatus == '待接收'||element.taskStatus == '进行中'){
          element.play = ['编辑','删除','查看详情']
        }
        else{
            element.play = ['删除','查看详情']
        }
       })
            })
        })
        const onReset = async()=>{
             await axios({
                method:'get',
                url:'command/findTaskList',
                params:{
                    currentPage:'1',
                    pageSize:'10'
                }
            }).then((res)=>{
                Msg.list = res.data.data})
        }
        const SubmitEvent = async()=>{
            multipleSelection.value.push(rowId.value)
            for(let i =0;i< multipleSelection.value.length;i++){
                idList.value.push(multipleSelection.value[i].taskId)
            }
            dialogVisible.value = false
            let idArr = idList.value.join(',')
            await axios({
                method:'POST',
                url:'command/portionTask',
                params:{
                    taskId:idArr,
                    taskGroup:checkList.value[0]
                }
            }).then((res)=>{
                console.log(res)
            })
        }
        const handleSelectionChange = (val: User[])=>{
            multipleSelection.value = val
        }
   return{
    onSubmit,handleClose,edit,fp,cj,handleClick,open,innerDrawer,drawer,formInline,...toRefs(Msg),operate,dialogVisible,onReset,checkList,SubmitEvent,currentPage,pageSize,handleSelectionChange,isShow,quitfp,gofp

   } 
}
})





</script>
<style lang="less"  scoped>




.zh_box {

    width: 100%;
    height: 100%;
}

.header {
    width: 100%;
    height: 5%;
    font-size: 13px;
}
.searchBox {
    box-sizing: border-box;
    padding:0px 50px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}
.search button {
    width: 100px;
    height: 40px;
    margin-left: 20px;
}

.searchBtn {
    margin-left: 120px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 8px;
}

.grid-content {
    border-radius: 8px;
    min-height: 30px;
}

.searchBtn[data-v-1bd2a9b0] {
    margin-left: 0;
}

.right {
    background-color: f5f5f5;
}

.el-form {
    background-color: #FFFFFF;
    // width: 1160px;
    // height: 255px;
}


.establish_box {
    padding: 20px 0px;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
    height: 30px !important;
}
</style>
  